<template>
    <view class="page">
        <view>
            <view class="header_box">
                <view class="dhl_box">
                    <view class="dhl_bot_box">
                        <view class="dhl_left_text" @click="leftClick">
                            <view><u-icon name="arrow-left" color="#fff" size="32"></u-icon></view>
                            <view class="dhl_left_txt">返回</view>
                        </view>
                        <view class="dhl_middle_text">签到福利</view>
                    </view>
                </view>
                <view class="days_box">连续签到7天</view>
                <view class="large_box">领大王币、优惠券、重抽令</view>
                <view class="qd_box">
                    <view class="qd_xiaokuang_box">
                        <view class="qd_left_box">
                            <view class="ad_dange_box" v-for="(item, index) in  qdList" :key="index">
                                <view class="yqd_box" v-if="item.is_sign"></view>
                                <view class="qd_days_box">0{{ item.day }}</view>
                                <view class="qd_pic_box">
                                    <image :src="item.image" mode="heightFix" />
                                </view>
                                <view class="qd_name_box">{{ item.text }}</view>
                                <view class="qd_prce_box">{{ item.num }}</view>
                            </view>
                        </view>
                        <view class="qd_right_box">
                            <view class="sevel_yqd_box" v-if="qdObj.is_sign"></view>
                            <view class="d_right_days_box">0{{ qdObj.day }}</view>
                            <view class="d_right_libao_box">
                                <image :src="qdObj.image" mode="scaleToFill" />
                            </view>
                            <view class="d_right_name_box">{{ qdObj.text }}</view>
                            <view class="d_right_zs_box">{{ qdObj.num }}</view>
                        </view>
                    </view>
                    <view class="button_box" @click="qdButton" v-if="!daySign">立即签到</view>
                    <view class="button_boxAct" v-else>立即签到</view>
                </view>
            </view>
        </view>
        <view class="sm_box" v-html="smContent"></view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            qdList: [],//签到列表
            qdObj: [],//第七天
            daySign: '',
            smContent: '',
            value:100,
        }
    },
    onShow() {
        this.init()
    },
    methods: {
        init() {
            this.$Request.get(this.$api.user.signPanel).then(res => {
                this.daySign = res.data.is_sign
                this.smContent = res.data.rule
                this.qdObj = res.data.sign_panel[6]
                res.data.sign_panel.length = 6
                this.qdList = res.data.sign_panel
            })
        },
        leftClick() {
            uni.navigateBack()
        },
        qdButton() {
            let data = {

            }
            uni.showLoading({
                title: '加载中',
                icon: 'none'
            })
            this.$Request.post(this.$api.user.sign, data).then(res => {
                this.init()
                uni.hideLoading()
            })
        }
    }

}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-color: #F9F9F9;

    .header_box {
        width: 100%;
        height: 584rpx;
        background-image: url('https://new.qingfentool.vip/upload/image/20230711/a7c01781513ff5a07d05ea79d27624e8.png');
        background-size: 100% 100%;
        margin-bottom: 450rpx;

        .dhl_box {
            width: 100%;
            height: 160rpx;
            position: relative;
            margin-bottom: 44rpx;

            .dhl_bot_box {
                width: 100%;
                height: 52rpx;
                position: absolute;
                bottom: 0;

                .dhl_left_text {
                    width: 120rpx;
                    height: 52rpx;
                    float: left;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .dhl_left_txt {
                        height: 46rpx;
                        font-size: 32rpx;
                        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                        font-weight: 500;
                        color: #FFFFFF;
                        line-height: 46rpx;
                    }
                }

                .dhl_middle_text {
                    width: 200rpx;
                    height: 52rpx;
                    font-size: 36rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 52rpx;
                    margin: auto;
                    text-align: center;
                }
            }



        }

        .days_box {
            width: 100%;
            height: 52rpx;
            font-size: 36rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 52rpx;
            text-align: center;
        }

        .large_box {
            width: 100%;
            height: 58rpx;
            font-size: 40rpx;
            font-family: Source Han Sans CN-Bold, Source Han Sans CN;
            font-weight: 700;
            color: #FFFFFF;
            line-height: 58rpx;
            text-align: center;
            margin-bottom: 30rpx;
        }

        .qd_box {
            width: 710rpx;
            height: 626rpx;
            background: #FFFFFF;
            box-shadow: 0rpx -4rpx 36rpx 0rpx rgba(164, 164, 164, 0.302);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            opacity: 1;
            margin: auto;
            padding-top: 34rpx;

            .qd_xiaokuang_box {
                width: 100%;
                height: 440rpx;
                display: flex;
                justify-content: space-between;
                padding-right: 10rpx;
                margin-bottom: 38rpx;

                .qd_left_box {
                    width: 502rpx;
                    height: 100%;
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: wrap;

                    .ad_dange_box {
                        width: 146rpx;
                        height: 212rpx;
                        background-image: url('https://new.qingfentool.vip/upload/image/20230712/b74cc5242904161482c0d10b0d069eff.png');
                        background-size: 100% 100%;
                        border-radius: 10rpx 10rpx 10rpx 10rpx;
                        position: relative;

                        .yqd_box {
                            width: 100%;
                            position: absolute;
                            background: rgba(255, 255, 255, 0.4);
                            height: 100%;
                        }

                        .qd_days_box {
                            width: 60rpx;
                            height: 58rpx;
                            margin-left: 10rpx;
                            font-size: 40rpx;
                            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                            font-weight: 500;
                            color: #FFFFFF;
                            line-height: 58rpx;
                            margin-bottom: 12rpx;
                        }

                        .qd_pic_box {
                            width: 86rpx;
                            height: 55rpx;
                            margin: auto;
                            display: flex;
                            justify-content: center;

                            image {
                                height: 100%;
                            }
                        }

                        .qd_name_box {
                            width: 100%;
                            height: 24rpx;
                            font-size: 16rpx;
                            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 24rpx;
                            text-align: center;
                            margin: 10rpx 0 0 0;

                        }

                        .qd_prce_box {
                            width: 100%;
                            height: 34rpx;
                            font-size: 24rpx;
                            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                            font-weight: 500;
                            color: #FFFFFF;
                            line-height: 34rpx;
                            text-align: center;
                            margin: 14rpx 0 0 0;
                        }

                    }

                    .ad_dange_box:nth-child(1) {
                        margin-bottom: 16rpx;
                    }

                    .ad_dange_box:nth-child(2) {
                        margin-bottom: 16rpx;
                    }

                    .ad_dange_box:nth-child(3) {
                        margin-bottom: 16rpx;
                    }

                }

                .qd_right_box {
                    width: 192rpx;
                    height: 100%;
                    background-image: url('https://new.qingfentool.vip/upload/image/20230712/62dab5d00eae9984a6b3c4fe1fae1282.png');
                    background-size: 100% 100%;
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                    position: relative;

                    .sevel_yqd_box {
                        width: 100%;
                        position: absolute;
                        background: rgba(255, 255, 255, 0.4);
                        height: 100%;
                    }

                    .d_right_days_box {
                        width: 60rpx;
                        height: 58rpx;
                        margin-left: 10rpx;
                        font-size: 40rpx;
                        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                        font-weight: 500;
                        color: #FFFFFF;
                        line-height: 58rpx;
                        margin-bottom: 52rpx;
                    }

                    .d_right_libao_box {
                        width: 150rpx;
                        height: 170rpx;
                        // box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.14);
                        margin: auto;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .d_right_name_box {
                        width: 100%;
                        height: 34rpx;
                        font-size: 24rpx;
                        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                        font-weight: 500;
                        color: #FFFFFF;
                        line-height: 34rpx;
                        text-align: center;
                        margin: 14rpx 0 0 0;
                    }

                    .d_right_zs_box {
                        width: 100%;
                        height: 28rpx;
                        font-size: 20rpx;
                        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                        font-weight: 500;
                        color: #FFFFFF;
                        line-height: 28rpx;
                        text-align: center;
                        margin: 6rpx 0 0 0;
                    }
                }
            }

            .button_box {
                width: 408rpx;
                height: 78rpx;
                background: linear-gradient(183deg, #FF846C 0%, #FE3D3B 100%);
                box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0, 0, 0, 0.11);
                border-radius: 42rpx 42rpx 42rpx 42rpx;
                opacity: 1;
                margin: auto;
                text-align: center;
                line-height: 78rpx;
                font-size: 36rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
            }

            .button_boxAct {
                width: 408rpx;
                height: 78rpx;
                // background: linear-gradient(183deg, #FF846C 0%, #FE3D3B 100%);
                // box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0, 0, 0, 0.11);
                background-color: #999;
                border-radius: 42rpx 42rpx 42rpx 42rpx;
                opacity: 1;
                margin: auto;
                text-align: center;
                line-height: 78rpx;
                font-size: 36rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
            }
        }
    }

    .sm_box {
        width: 694rpx;
        margin: auto;
        background-color: #F9F9F9;
        font-size: 24rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #999999;
        line-height: 34rpx;
    }
}
</style>